<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .title_p {
        	height: 35px;
        	line-height: 41px;
        	padding: 0 15px;
        	color: #333;
        	font-size: 12px;
        }
        .address_box {
        	display: -webkit-box;
        	display: -webkit-flex;
        	align-items: center;
        	background-color: #fff;
        	padding: 17px 15px;
        	margin-bottom: 6px;
        }
        .address_box .address_boxl {
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        }
        .address_box .address_boxl .address {
        	font-size: 15px;
        	color: #333;
        	margin-bottom: 12px;
        }
        .address_box .address_boxl .info {
        	font-size: 12px;
        	color: #999;
        }
        .address_box .address_boxl .info .name {
        	margin-right: 8px;
        }
        .address_boxr img {
        	height: 13px;
        }
        .order_info {
        	margin-bottom: 6px;
        }
        .order_info	.order_info_title {
        	padding: 13px 15px;
        	color: #333;
        	font-size: 15px;
        	border-bottom: 1px solid #e8e8e8;
        	background-color: #fff;
        }
        .order_info .goods {
        	padding: 16px 0;
        	border-bottom: 1px solid #e8e8e8;
        	background-color: #fff;
        }
        .order_info .goods ul li:last-child .li_box {
        	margin-bottom: 0;
        }
        .order_info .goods .li_box {
			color: #999;
			display: -webkit-box;
			display: -webkit-flex;
			padding: 0 15px;
			margin-bottom: 19px;
        }
        .order_info .goods .li_box .li_boxl {
			font-size: 14px;
			flex: 1;
			-webkit-flex: 1;
			box-flex: 1;
			-webkit-box-flex: 1;
			padding-right: 5px;
        }
        .order_info .goods .li_box .li_boxr {
			font-size: 12px;
        }
        .order_info .goods .li_box .li_boxr .goods_price {
        	min-width: 48px;
        	text-align: right;
        }
        .discount_box {
        	margin-bottom: 6px;
        	background-color: #fff;
        }
        .discount_box ul li:last-child .discount {
			border-bottom: none;
        }
        .discount {
        	height: 50px;
        	line-height: 50px;
        	padding: 0 15px;
        	display: -webkit-box;
        	display: -webkit-flex;
        	border-bottom: 1px solid #e8e8e8;
        }
        .discount .discount_l {
        	font-size: 12px;
        	color: #999;
        	flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
        	display: -webkit-box;
        	-webkit-box-align: center;
        }
        .discount .discount_l img {
        	width: 16px;
        	display: block;
        	margin-right: 5px;
        }
       	.discount .discount_r {
       		color: #999;
       		font-size: 12px;
       		display: -webkit-box;
        	-webkit-box-align: center;
       	}
       	.discount .discount_r img {
       		height: 13px;
       		display: block;
       		margin-left: 10px;
       	}
       	.gst_box {
       		height: 50px;
       		line-height: 50px;
       		padding: 0 15px;
       		display: -webkit-box;
        	display: -webkit-flex;
        	background-color: #fff;
        	border-bottom: 1px solid #e8e8e8;
       	}
       	.gst_box:last-child {
       		border-bottom: none;
       	}
       	.gst_box .gst_boxl {
       		color: #333;
       		font-size: 15px;
       		flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
       	}
       	.gst_box .gst_boxl span {
       		color: #999;
       	}
       	.gst_box .gst_boxr {
       		color: #999;
       		font-size: 12px;
       	}
       	.payment_box {
       		background-color: #fff;
       	}
       	.payment_box .need_pay {
       		height: 50px;
       		line-height: 50px;
       		padding: 0 15px;
       		display: -webkit-box;
        	display: -webkit-flex;
       		border-bottom: 1px solid #e8e8e8;
       	}
       	.need_pay .need_pay_l {
       		color: #333;
       		font-size: 15px;
       		flex: 1;
        	-webkit-flex: 1;
        	box-flex: 1;
        	-webkit-box-flex: 1;
       	}
       	.need_pay .need_pay_r {
       		color: #f9547f;
       		font-size: 12px;
       	}
       	.payment_method {
       		padding: 0 15px 16px;
       		margin-bottom: 6px;
       	}
       	.payment_method .payment_method_t {
    			height: 48px;
    			line-height: 48px;
       	}
       	.payment_method .payment_method_b ul {
			overflow: hidden;
       	}
       	.payment_method .payment_method_b ul li {
       		width: 50%;
       		float: left;
       		padding: 0 8px 0 0;
       		box-sizing: border-box;
       	}
       	.payment_method .payment_method_b ul li:nth-child(2n) {
       		padding: 0 0 0 8px;
       	}
       	.payment_method .payment_method_b ul li .li_pay {
       		height: 55px;
       		border: 1px solid #ccc;
       		border-radius: 5px;
       		display: -webkit-box;
       		-webkit-box-align: center;
       		-webkit-box-pack: center;
       	}
       	.payment_method .payment_method_b ul li .li_pay img {
       		width: 31px;
       		display: block;
       		margin-right: 11px;
       	}
       	.payment_method .payment_method_b ul li .li_pay span {
       		display: block;
       		color: #333;
       		font-size: 12px;
       	}
       	.remark_box {
       		background-color: #fff;
       	}
       	.remark_box textarea {
       		width: 100%;
       		height: 67px;
       		color: #999;
       		font-size: 14px;
       		padding: 10px 15px;
          box-sizing: border-box;
          display: block;
       	}
       	.remark_box textarea::-webkit-input-placeholder {
       		color: #999;
       	}
        .no_address {
          display: -webkit-box;
          display: -webkit-flex;
          align-items: center;
          background-color: #fff;
          padding: 17px 15px;
          margin-bottom: 6px;
          color: #999;
        }
        .no_address .no_address_boxl {
          flex: 1;
          -webkit-flex: 1;
          box-flex: 1;
          -webkit-box-flex: 1;
        }
        .hidden {
          display: none !important;
        }
        .pay_type .active .li_pay{
          border:1px solid #e62442 !important;
        }
        .li_boxb {
          height: 33px;
          line-height: 33px;
          color: #999;
          font-size: 12px;
          padding: 0 15px;
          display: -webkit-box;
          -webkit-box-align: center;
        }
        .li_boxb input {
          display: none;
        }
        .li_boxb img {
          height: 18px;
          display: block;
        }
        .li_boxb span {
          margin-left: 10px;
          display: block;
        }
        .default_address_icon{
          width: 20px;
          height: 20px;
          display: block;
          margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="address_wrap">
      <div class="no_address hidden" onclick="fnOpenAddressList();" tapmode>
          <div class="no_address_boxl">请填入地址</div>
          <div class="address_boxr">
            <img src="../image/right.png">
          </div>
      </div>
      <div class="has_address" onclick="fnOpenAddressList();" tapmode>
          <div class="title_p">配送至</div>
          <div class="address_box">
          	<div class="address_boxl">
          		<div class="address">&nbsp;</div>
          		<div class="info">
          			<span class="name">加载中</span>
          			<span class="phone"></span>
          		</div>
          	</div>
          	<div class="address_boxr">
          		<img src="../image/right.png">
          	</div>
          </div>
      </div>
    </div>
    <div class="order_info">
    	<div class="order_info_title shop_title">商家名称</div>
    	<div class="goods">
    		<ul id="goods_ul">
    			<!-- <li>
    				<div class="li_box">
    					<div class="li_boxl">菜品名称</div>
    					<div class="li_boxr">
    						<span class="goods_num">×1</span>
    						<span class="goods_price">RM19</span>
    					</div>
    				</div>
    			</li>

    			<li>
    				<div class="li_box">
    					<div class="li_boxl">餐盒</div>
    					<div class="li_boxr">
    						<span class="goods_num">×3</span>
    						<span class="goods_price">RM3</span>
    					</div>
    				</div>
    			</li> -->
    		</ul>
    	</div>
    	<div class="discount_box">
    		<ul>
    			<li>
    				<div class="discount">
			    		<div class="discount_l"><img src="../image/order_icon1.png"><span class="coupon_str">暂无优惠</span></div>
			    		<div class="discount_r">-RM <span class="coupon_price">0</span></div>
    				</div>
    			</li>
    			<li onclick="fnUseTicket();" tapmode>
    				<div class="discount">
			    		<div class="discount_l"><img src="../image/order_icon2.png">优惠卷</div>
			    		<div class="discount_r"><span class="ticket_desc"><span class="ticket_num">0</span>个优惠券可用</span><img src="../image/right.png" alt=""></div>
    				</div>
    			</li>
    		</ul>
    	</div>
    	<!-- <div class="gst_box">
    		<div class="gst_boxl">订单金额<span>（<span>excl.</span> GST 6%）</span></div>
    		<div class="gst_boxr">RM <span class="order_price"></span></div>
		  </div> -->
    	<div class="gst_box gst_rate" style="display: none;">
    		<div class="gst_boxl">消费税<span>(GST 6%)</span></div>
    		<div class="gst_boxr">RM <span class="gst_fee"></span></div>
    	</div>
    	<div class="gst_box">
    		<div class="gst_boxl">配送费</div>
    		<div class="gst_boxr">RM <span class="delivery_price"></span></div>
    	</div>
    </div>
    <div class="payment_box">
    	<div class="need_pay">
    		<div class="need_pay_l">需支付</div>
    		<div class="need_pay_r">RM <span class="must_pay"></span></div>
    	</div>
      <div class="need_pay">
        <div class="need_pay_l">开发票</div>
        <div class="need_pay_r">
          <img class="default_address_icon" src="../image/select_address_on.png">
        </div>
      </div>
    	<div class="payment_method">
    		<div class="payment_method_t">支付方式</div>
    		<div class="payment_method_b">
    			<ul class="pay_type">
    				<!-- <li class="active" onclick="fnPayType(1,this);" tapmode>
    					<div class="li_pay">
	    					<img src="../image/wechat_icon.png">
    						<span>微信支付</span>
    					</div>
    				</li> -->
            <li class="active" onclick="fnPayType(1,this);" tapmode>
              <div class="li_pay">
                <img style="width: 80px;" src="../image/paydollar.png">
              </div>
            </li>
    				<li onclick="fnPayType(2,this);" tapmode>
    					<div class="li_pay">
	    					<img src="../image/cmb.png">
    						<span>支付宝        </span>
    					</div>
    				</li>
    			</ul>
    		</div>
    	</div>
    </div>
    <div class="remark_box">
    	<textarea class="remark" placeholder="填写备注"></textarea>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script id="goodsTpl" type="text/x-dot-template">
    {{ for(var i=0;i<it['goods'].length;i++){ }}
        <li>
          <div class="li_box">
            <div class="li_boxl">{{=it['goods'][i]['goods_name']}}</div>
            <div class="li_boxr">
              <span class="goods_num">×{{=it['goods'][i]['goods_num']}}</span>
              <span class="goods_price">RM{{=(it['goods'][i]['goods_price']*1).toFixed(2)}}</span>
            </div>
          </div>
        </li>
    {{ }; }}
    <li>
      <div class="li_box">
        <div class="li_boxl">餐盒</div>
        <div class="li_boxr">
          <span class="goods_num">×{{=it['canteen_num']}}</span>
          <span class="goods_price">RM{{=(it['canteen_price']*1).toFixed(2)}}</span>
        </div>
      </div>
    </li>
</script>
<script type="text/javascript">

    var payType = 1; // 默认paydollar支付

    apiready = function(){
        goodsObj = api.pageParam.goodsObj;
        ticket_id = 0;
        ticket_price = 0;
        coupon_id = 0;
        coupon_price = 0;
        user = $api.getStorage('user_data');
        address_id = 0;
        openLoading();
        fnCheckOrder();
        api.addEventListener({
            name: 'orderSubmitEvent'
        }, function(ret, err) {
            if (ret) {
                //检查一轮，没问题后提交生成一个订单再支付
                if(!address_id) {
                  api.toast({
                      msg: '请先选择地址',
                      location : 'middle'
                  });
                  return;
                }
                if(weight > 10000) {
                  api.toast({
                      msg: '订单总重量大于10KG，不能配送',
                      location : 'middle'
                  });
                  return;
                }
                // 如果是支付宝支付，先return，到时要注释掉 - tim 2018年04月11日12:32:21
                if(payType != 1){
                  api.toast({
                    msg: '支付宝支付',
                    location: 'middle'
                  });
                  return;
                }
                /*if(needReceipt == 1 && !user.emain) {
                  api.toast({
                      msg: '需开发票请先完善邮箱',
                      location : 'middle'
                  });
                  return;
                }*/
                openLoading();
                var _remark = filteremoji($('.remark').val());
                api.ajax({
                    url: rootPath+'/api/order/create_order',
                    method: 'post',
                    data: {
                        values: { 
                            goodsObj: goodsObj,
                            address_id:address_id,
                            remark : _remark,
                            uid:user.id,
                            token:user.token,
                            ticket_id:ticket_id,
                            need_receipt:needReceipt
                        },

                    }
                }, function(ret, err) {
                    if (ret) {
                        if(ret.status == 200) {
                          //使用了优惠卷，要刷新优惠卷
                          if(ticket_id) {
                            api.sendEvent({
                              name: 'ticketChangeEvent',
                            });
                          }
                          // 调出支付
                          fnGoPay(ret.data);
                          /*api.sendEvent({
                              name: 'orderChangeEvent',
                              extra: {
                              }
                          });
                          
                          api.openWin({
                              name: 'payment_result',
                              url: './payment_result.html',
                              pageParam: {
                                  order_id : ret.data,
                              }
                          });*/
                        }else {
                          api.toast({
                              msg: ret.msg,
                              location: 'middle'
                          });
                        }
                    } else {
                        api.toast({
                            msg: err.msg,
                            location : 'middle'
                        });
                    }
                    closeLoading();
                });
            } 
        });

        //监听地址变化
        api.addEventListener({
            name: 'addressChangeEvent'
        }, function(ret, err) {
            if (ret) {
                address_id = ret.value.id;
                fnChangeAddress(address_id); 
            } 
        });

        //监听优惠卷使用
        api.addEventListener({
            name: 'useTicketEvent'
        }, function(ret, err) {
            if (ret) {
                ticket_id = ret.value.ticket_id;
                // ticket_price = ret.value.price;
                // $('.ticket_desc').text('-RM '+ticket_price);
                fnCheckOrder();
            }
        });

        

    };

    var needReceipt = 1;

    function fnSetReceipt (this_) {
      if(needReceipt == 1){
        $(this_).find('.default_address_icon').attr('src', '../image/select_address_off.png');
        needReceipt = 0;
      }else{
        $(this_).find('.default_address_icon').attr('src', '../image/select_address_on.png');
        needReceipt = 1;
      }
    };

    function fnGoPay (order_id) {
      if(payType == 1){
        fnPaydollarPay(order_id);
      }else{
        api.toast({
          msg: '支付宝支付',
          location: 'middle'
        });
      }
    }

    function fnPaydollarPay (order_id) {
      api.openWin({
          name: 'paydollar',
          url: './paydollar.html',
          pageParam: {
              order_id: order_id
          }
      });
    }

    function fnChangeAddress(id_) {
      api.ajax({
          url: rootPath+'/api/user/get_address_detail',
          method: 'get',
          data: {
              values: { 
                  id: id_,
                  uid : user.id,
                  token:user.token
              },
          }
      }, function(ret, err) {
          if (ret) {
              if(ret.status == 200) {
                  $('.has_address').removeClass('hidden');
                  $('.no_address').addClass('hidden');
                  $('.name').text(ret.data.username);
                  $('.phone').text(ret.data.tel);
                  $('.address').text(ret.data.area_name1+' '+ret.data.address_detail);
              }
          } 
      });
    }

    function fnCheckOrder() {
        api.ajax({
            url: rootPath+'/api/order/pre_create_order',
            method: 'get',
            data: {
                values: { 
                    goodsObj: JSON.stringify(goodsObj),
                    uid : user.id,
                    token:user.token,
                    ticket_id : ticket_id
                },
            }
        }, function(ret, err) {
            if (ret) {
              if(ret.status == 200) {
                if(ret.address) {
                  $('.name').text(ret.address.username);
                  $('.phone').text(ret.address.tel);
                  $('.address').text(ret.address.area_name1+' '+ret.address.address_detail);
                  address_id = ret.address.id;
                }else {
                  $('.has_address').addClass('hidden');
                  $('.no_address').removeClass('hidden');
                }
                setDotData(ret,'goodsTpl','goods_ul',true);
                $('.shop_title').text(ret.shop.name);
                shop_id = ret.shop.id;
                if(ret.is_gst  == 1) {
                  $('.gst_box').show();
                  $('.gst_fee').text(ret.gst_fee);
                }
                // $('.order_price').text(ret.order_price); // 暂时隐藏 - tim
                $('.delivery_price').text(ret.delivery_price);
                $('.must_pay').text(ret.must_pay);
                if(ret.ticket_id > 0) {
                  $('.ticket_desc').text('-RM '+ret.ticket_reduce_price);
                }else {
                  $('.ticket_num').text(ret.ticket_num);
                }
                //减免
                if(ret.coupon_id) {
                  $('.coupon_str').text(ret.coupon_str);
                  $('.coupon_price').text(ret.coupon_price);
                  coupon_id = ret.coupon_id;
                  coupon_price = ret.coupon_price;
                }
                must_pay = ret.must_pay;
                total2_price = ret.total2_price;
                api.sendEvent({
                    name: 'orderPriceEvent',
                    extra: {
                        must_pay: ret.must_pay, 
                    }
                });
                weight = ret.weight;
              }
            } else {
                api.toast({
                    msg: err.msg,
                    location : 'middle'
                });
            }
            closeLoading();
        });
    }

    function fnOpenAddressList() {
        api.openWin({
            name: 'address_manage_order',
            url: './address_manage_order.html',
            pageParam: {
                fromWhere: 'submit_order'
            }
        });
    }

    function fnOpenAddressDetail() {
        api.openWin({
            name: 'add_address',
            url: './add_address.html',
            pageParam: {
                fromWhere: 'submit_order'
            }
        });
    }

    function fnUseTicket() {
      api.openWin({
          name: 'use_coupon',
          url: './use_coupon.html',
          pageParam: {
            shop_id : shop_id,
            must_pay : total2_price,
            old_ticket_id : ticket_id
          }
      });
    }

    function fnPayType(type,this_) {
      $('.pay_type li').removeClass('active');
      $(this_).addClass('active');
      payType = type;
    }
</script>
</html>